<template>
  <view class="order-content">
    <view class="top-content">
      <view class="top-content-type">{{ $utils.parOrderType(orderInfo.orderType) || '--' }}</view>
      <view class="top-content-status">{{
        $utils.parOrderState(orderInfo.orderState) || '--'
      }}</view>
    </view>
    <view class="desc-item" v-if="orderInfo.carNum">
      <view class="desc-item-label">车牌号:</view>
      <view class="desc-item-value">{{ orderInfo.carNum || '--' }}</view>
    </view>
    <view class="desc-item">
      <view class="desc-item-label">订单号:</view>
      <view class="desc-item-value">{{ orderInfo.orderNum || '--' }}</view>
    </view>
    <view class="desc-item">
      <view class="desc-item-label">订单金额:</view>
      <view class="desc-item-value">{{ orderInfo.actPrice || '--' }}</view>
    </view>
    <view class="desc-item">
      <view class="desc-item-label">下单日期:</view>
      <view class="desc-item-value">{{ orderInfo.gmtTime || '--' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    orderInfo: {
      default: {},
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.order-content {
  min-height: 320rpx;
  margin: 20rpx;
  padding: 40rpx;
  background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
  border-radius: 16px;

  .top-content {
    display: flex;
    height: 80rpx;
    margin-bottom: 10rpx;
    line-height: 60rpx;
    border-bottom: 1rpx solid #dcdcdc;
    &-type {
      font-size: 36rpx;
      color: #fff;
    }
    &-status {
      font-size: 32rpx;
      color: #ffe471;
      flex: 1;
      text-align: right;
    }
  }

  .desc-item {
    display: flex;
    min-height: 70rpx;
    font-size: 32rpx;
    color: #fff;
    line-height: 70rpx;

    &-label {
      width: 150rpx;
    }
    &-value {
      flex: 1;
      margin-left: 30rpx;
      padding-top: 8px;
      line-height: 40rpx;
    }
  }
  .bottom-item {
    height: 60rpx;
    line-height: 60rpx;
    color: #fff;
    &-btn {
      width: 161rpx;
      height: 60rpx;
      line-height: 60rpx;
      float: right;
      border-radius: 35rpx;
      border: 1px solid #ffffff;
      text-align: center;
    }
  }
}
</style>
